<div class="servermap">
    <div id="servermap" style="width:100%;height:100%;position: relative;"></div>
    <div id="servermapOverview"></div>
    <div class="servermap-toolbar" ng-show="bShowServerMapStatus" style="top:-55px">
    	<span class="glyphicon glyphicon-question-sign serverMapTooltip"></span>
	    <div class="servermap-status" style="right:420px">
	    	<input type="text" class="form-control" ng-keydown="searchNodeByEnter($event)" ng-model="searchNodeQuery" placeholder="Enter node name" style="display:inline-block;;width:147px"/>
	    	<button class="btn btn-info" style="margin-left:-10px;margin-top:-4px" ng-click="searchNode()"><span class="glyphicon glyphicon-search"></span></button>
	    	<button class="btn btn-info" style="margin-top:-4px" ng-click="clearSearchNode()"><span class="glyphicon glyphicon-trash"></span></button>
	    </div>
	    <div class="servermap-status">
	    	<button type="button" class="btn btn-default btn-info" style="margin-top:-4px" ng-click="moveToPast()"><span class="glyphicon glyphicon-chevron-left"></span></button><button type="button" class="btn btn-default btn-info" style="margin-top:-4px" ng-click="moveToFuture()"><span class="glyphicon glyphicon-chevron-right"></span></button>
			<div class="alert alert-info serverMapTime" style="min-height: 30px;display:inline-block;padding-bottom:9px;padding-top:10px">
	            <h6 ng-show="oNavbarVoService.getQueryStartTime() && oNavbarVoService.getQueryEndTime()">{{oNavbarVoService.getQueryStartTime() | date:'yyyy-MM-dd HH:mm:ss'}} ~ {{oNavbarVoService.getQueryEndTime() | date:'yyyy-MM-dd HH:mm:ss'}}</h6>
	        </div>
	    </div>
	    <div class="servermap-status search-result" ng-show="bShowServerMapStatus">
	    	<span style="display:inline-block" class="label label-{{ searchNodeIndex == $index ? 'success' : 'info'}}" ng-repeat="sNode in searchNodeList" ng-click="searchNodeWithCategory($index)">{{sNode.applicationName}}({{sNode.serviceType}})</span>
	    	<div class="count">Result : {{searchNodeList.length}}</div>
	    </div>
    </div>
    <div class="servermap-toolbar-handle" ng-show="bShowServerMapStatus">
    	<button type="button" class="btn btn-xs btn-default btn-info" ng-click="toggleToolbar()" style="height:54px"><span class="glyphicon glyphicon-chevron-down"></span></button>
    </div>   
    <div ng-include=" 'error' "></div>
    <div ng-include=" 'warning' "></div>
    <div ng-include=" 'info' "></div>
    <div ng-include=" 'loading' "></div>

    <ul ng-style="nodeContextMenuStyle" class="nodeContextMenu dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="z-index:10">
        <li>
        	<a tabindex="-1" ng-href="#/inspector/{{inspectApplicationName}}@{{inspectCategory}}/{{oNavbarVoService.getReadablePeriod()}}/{{oNavbarVoService.getQueryEndDateTime()}}"
               target="_blank"><span class="glyphicon glyphicon-search"></span> Inspect Agents</a>
        </li>
    </ul>

    <ul ng-style="linkContextMenuStyle" class="linkContextMenu dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="z-index:10">
        <li><a href tabindex="-1" ng-click="passingTransactionList()"><span class="glyphicon glyphicon-filter"></span> Filter Transaction</a></li>
        <li><a href tabindex="-1" ng-click="openFilterWizard()"><span class="glyphicon glyphicon-filter"></span> Filter Transaction Wizard</a></li>
    </ul>

    <!-- Modal -->
    <div class="modal fade bs-modal-lg center" id="filterWizard" tabindex="-1" role="dialog" aria-labelledby="myFilterWizard"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            	<div class="antStyleHint" ng-show="showAntStyleHint">
            		<table>
            			<tbody>
            				<tr>
            					<td>*</td>
            					<td>Matches zero or more <span style="color:red;font-weight:bold">characters</span></td>
            				</tr>
            				<tr>
            					<td>?</td>
            					<td>Matches exactly one <span style="color:red;font-weight:bold">characters</span></td>
            				</tr>
            				<tr>
            					<td>**</td>
            					<td>Matches zero or more <span style="color:red;font-weight:bold">directories</span></td>
            				</tr>
            				<tr>
            					<td>&nbsp;</td>
            					<td>&nbsp;</td>
            				</tr>
            				<tr>
            					<td style="vetical-align:middle">Example</td>
            					<td>
            						<p>/pinpoint/**/*.html</p>
            						<p>/pinpoint/??.html</p>
            						<p>/pinpoint/**/??.html</p>
            					</td>
            				</tr>
            			</tbody>
            		</table> 
        		</div>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myFilterWizard">Filter Wizard</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group" style="margin-bottom:0">
                            <label class="col-sm-2 control-label" style="padding-top:25px;">Path</label>
                            <sidebar-title-directive namespace="forServerMap"></sidebar-title-directive>
                        </div>
                        <div class="form-group" ng-show="sourceInfo.isWas || targetInfo.isWas">
                            <label class="col-sm-2 control-label" style="padding-top:4px;">Agent</label>
                            <div class="col-sm-8">
                                <select ng-show="sourceInfo.isWas" ng-model="fromAgentName" class="fromAgentName" style="width:120px;">
                                    <option value="">All</option>
                                    <option ng-repeat="agentName in fromAgent" value="{{agentName}}">{{agentName}}</option>
                                </select>
                                <!--span ng-hide="sourceInfo.isWas">All</span-->
                                &nbsp;
                                <span class="glyphicon glyphicon-arrow-right"></span>
                                &nbsp;
                                <select ng-show="targetInfo.isWas" ng-model="toAgentName" class="toAgentName" style="width:120px;">
                                    <option value="">All</option>
                                    <option ng-repeat="agentName in toAgent" value="{{agentName}}">{{agentName}}</option>
                                </select>
                                <!--span ng-hide="targetInfo.isWas">All</span-->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="urlPattern" class="col-sm-2 control-label">URL Pattern</label>

                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="urlPattern" placeholder="Request URL Pattern ( /pinpoint/**/??.html )">
                            </div>
                            <div class="col-sm-2" style="padding-top:7px">
                                <span class="label label-info" style="cursor:pointer" ng-click="toggleShowAntStyleHint()">ant-style</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="padding-top: 17px;">Response Time</label>

                            <div class="col-sm-8">
                                <slider id="responseTime" floor="0" ceiling="30000" step="100" ng-model-low="responseTime.from" ng-model-high="responseTime.to" translate="responseTimeFormatting"></slider>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Transaction Result</label>
                            <div class="col-sm-8">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm" ng-class="{true:'btn-success', false:'btn-default'}[includeFailed==null]" ng-click="includeFailed=null">Success + Failed</button>
                                    <button type="button" class="btn btn-sm" ng-class="{true:'btn-success', false:'btn-default'}[includeFailed==false]" ng-click="includeFailed=false">Success Only</button>
                                    <button type="button" class="btn btn-sm" ng-class="{true:'btn-success', false:'btn-default'}[includeFailed==true]" ng-click="includeFailed=true">Failed Only</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" ng-click="passingTransactionMap()">Filter</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <ul ng-style="backgroundContextMenuStyle" class="backgroundContextMenu dropdown-menu" role="menu"
        aria-labelledby="dropdownMenu" style="z-index:10">
        <li class="dropdown-submenu" ng-hide="mergeTypeList.length === 0">
            <a tabindex="-1">Node Setting</a>
            <ul class="dropdown-menu">
                <li ng-repeat="mergeType in mergeTypeList">
					<a href ng-click="toggleMergeGroup(mergeType)"><span class="glyphicon" style="width:14px" ng-class="{'glyphicon-ok': mergeStatus[mergeType]}"></span> Merge {{mergeType}}</a>
				</li>
            </ul>
        </li>
        <li class="dropdown-submenu">
            <a tabindex="-1">Link Setting</a>
            <ul class="dropdown-menu">
                <li>
					<a href class="labelTextType" ng-click="toggleLinkLabelTextType('totalRequestCount')"><span class="glyphicon" style="width:14px" ng-class="{'glyphicon-ok': totalRequestCount}"></span> Call Count</a>
				</li>
            </ul>
        </li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a tabindex="-1">Link Routing</a>
            <ul class="dropdown-menu">
				<li ng-repeat="type in routingType">
					<a href ng-click="toggleLinkRouting('type')"><span class="glyphicon" style="width:14px" ng-class="{'glyphicon-ok': linkRouting == type}"></span>{{type}}</a>
				</li>
            </ul>
        </li>
        <li class="dropdown-submenu">
            <a tabindex="-1">Link Curve</a>
            <ul class="dropdown-menu">
				<li ng-repeat="type in curveType">
					<a href ng-click="toggleLinkCurve(type)"><span class="glyphicon" style="width:14px" ng-class="{'glyphicon-ok': linkCurve == type}"></span>{{type}}</a>
				</li>
            </ul>
        </li>
        <li class="divider"></li>
        <li><a href ng-click="refresh()"><span class="glyphicon glyphicon-refresh"></span> Refresh</a></li>
    </ul>
    <div ng-controller="RealtimeChartCtrl" class="realtime" style="bottom:-200px;" ng-show="bInitialized">
		<div class="chart-title" style="height:24px;font-size:14px;top:0px;">
			<span>Realtime Active Thread Chart</span>
			<span class="chart-expand glyphicon glyphicon-pushpin" ng-click="pin()"></span>
			<span class="glyphicon glyphicon-question-sign realtimeTooltip tooltipstered" style="float:right;cursor:pointer;color:#FFF;font-size:17px;padding-right:6px;"></span>
		</div>
		<div class="agent-sum-chart">
			<div><span></span> (<span></span>)</div>
		</div>
		<div class="agent-chart-list" ng-click="showAgentInfo($event)">
			<div ng-show="showServerPaging" class="paging">
				<span style="font-weight:lighter">Total Servers : </span><span style="font-weight:bolder;font-size:18px;">{{serverTotalCount}}</span> <span>[ 1 ~ {{maxPageSize}} ]</span>
				<span class="page" style="text-decoration:initial;cursor:initial;color:#000;background-color:#FFF;">1</span>
				<span class="page" ng-repeat="page in pagingValue" ng-click="openRATChart(page)">{{page}}</span>
			</div>
		</div>
		<div class="connection-message">
			<h4></h4>
			<button type="button" class="btn btn-warning" style="display:none" ng-click="retryConnection()"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Retry</button>
		</div>

	</div>
</div>